<template>
  <div>
    <a-modal v-model="visible" title="新增计划" @ok="handleOk" width="800px">
      <Plan/>
    </a-modal>
    <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    <a-calendar>
      <ul slot="dateCellRender" slot-scope="value" class="events">
        <li v-for="item in getListData(value)" :key="item.content">
          <a-badge :status="item.type" :text="item.content" />
        </li>
      </ul>
      <template slot="monthCellRender" slot-scope="value">
        <div v-if="getMonthData(value)" class="notes-month">
          <section>{{ getMonthData(value) }}</section>
          <span>Backlog number</span>
        </div>
      </template>
    </a-calendar>
  </div>
</template>
<script>
import Plan from "./plan"
export default {
  components: {
    Plan
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleAdd() {
      debugger
      this.visible = true
    }, 

    getListData(value) {
      let listData
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: '1队早班.' },
            { type: 'success', content: '3队中班.' }
          ]
          break
        case 10:
          listData = [
            { type: 'warning', content: '5队早班' },
            { type: 'success', content: '5队早班' },
            { type: 'error', content: '5队晚班' }
          ]
          break
        case 15:
          listData = [
            { type: 'warning', content: '2队中班' },
            { type: 'success', content: '不上班休息' },
            { type: 'error', content: '1队轮休.' },
            { type: 'error', content: 'This is error event 2.' },
            { type: 'error', content: 'This is error event 3.' },
            { type: 'error', content: 'This is error event 4.' }
          ]
          break
        default:
      }
      return listData || []
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394
      }
    }
  }
}
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
